<template>

  <div class="credit-container" id="creditApply">

      <div class="mc-middle_title">
        <span>请确认申请贷款信息</span>
      </div>
      <div class="apply-info">
        <div class="ai-top">
          &#12288;{{companyInfo.productFundName}}
        </div>
        <div class="ai-qx">
          <div class="aq-item">
            <span class="aq-span">最高额度</span>
            <div class="item-right">
              <span style="color: #F5A623;font-size: 14px">{{ vMoney.decode((companyInfo.applyAmount/10000),0) }}</span>
              <span style="font-size: 14px">万</span>
            </div>
          </div>
          <div class="aq-item">
            <span class="aq-span">月利率</span>
            <div class="item-right">
              <span>
                {{ ((companyInfo.interestRate/12)*10).toFixed(2) }}‰
              </span>
            </div>
          </div>
          <div class="aq-item">
            <span class="aq-span">借款周期</span>
            <div class="item-right">
              <span style="color: #F5A623;font-size: 14px">{{ companyInfo.deadLine  }}</span>
              <template v-if="companyInfo.deadLineType=='0'">个月</template>
              <template v-else>日</template>
            </div>
          </div>
          <div class="aq-item">
            <span class="aq-span">授信有效期</span>
            <div class="item-right">
              <span style="font-size: 14px">{{ companyInfo.creditIndate }}</span>
              <span>个月</span>
            </div>
          </div>
        </div>
      </div>

      <div class="apply-company">
        <div class="title-box">
          <div class="title">贷款人企业信息</div>
        </div>

        <div class="item-row">
          <div class="item-left">
            <span>企业名称：</span>
          </div>
          <div class="item-right">
            <span>{{ companyInfo.corpName }}</span>
          </div>
        </div>
        <div class="item-row">
          <div class="item-left">
            <span>统一社会信用代码：</span>
          </div>
          <div class="item-right">
            <span>{{ companyInfo.certNo }}</span>
          </div>
        </div>
        <div class="item-row">
          <div class="item-left">
            <span>法定代表人姓名：</span>
          </div>
          <div class="item-right">
            <span>{{ companyInfo.corporationName }}</span>
          </div>
        </div>
        <div class="item-row">
          <div class="item-left">
            <span>法定代表人身份证号：</span>
          </div>
          <div class="item-right">
            <span>{{ companyInfo.corporationCertNo }}</span>
          </div>
        </div>

        <div class="item-row" style="line-height: 40px;" v-if="productCode==zsProductCode">
          <div class="item-left">
            <span>客户经理工号：</span>
          </div>
          <div class="item-right">
            <el-input placeholder="非必填，请输入工号" v-model="companyInfo.managerNo" maxlength="10"></el-input>
          </div>
        </div>
      </div>
      <div class="apply-submit">
        <el-button type="warning" class="base-btn apply-btn" @click="handleSubmit" :loading="btnLoading">确认</el-button>
      </div>

  </div>

</template>

<script>
import {mapState} from 'vuex';
import Agreement from '@/components/common/cms/agreement';
import {confirmApply,creditApply} from '@/api/authen/agreed';
import {creditApplyAgain} from '@/api/plat/plat';

export default {
  data() {
    return {
      applyDate: '',
      btnLoading: false,
      companyInfo: {
        applyAmount: "",
        applyDate: "",
        certNo: "",
        corpName: "",
        corporationCertNo: "",
        corporationName: "",
        deadLine: "",
        deadLineType:"",
        creditIndate:"",
        productFundName:"",
        managerNo:""
      },
      checked2: false,
      checkList: [{
        id: 1,
        code: 'cms_boc_charge_reporting',
        label: "《服务收费协议》"
      }, {
        id: 2,
        code: 'llt_tsd_fddbr_auth',
        label: "《法定代表人申明及授权书》"
      }],
      zsProductCode:''
    };
  },
  computed: mapState({
    user(state) {
      return state.user;
    }
  }),
  props:['code','productCode','expire'],
  components: {
    Agreement
  },
  mounted() {
    this.zsProductCode = process.env.ZS_CODE;
    this.initCreditApply();
  },
  methods: {
    agree() {
      this.checked2 = true;
    },

    againApply(){
      let _this = this;
      let uscCode = this.user.user.uscCode?this.user.user.uscCode:'';
      creditApplyAgain(this.code,uscCode,this.productCode).then(res=>{
        if (res.code === 200) {
          _this.$emit('apply-completed');
        }
      });
    },
    initCreditApply() {
      let _ = this;
      let uscCode = this.user.user.uscCode?this.user.user.uscCode:'';
      confirmApply(this.code,uscCode,this.productCode).then(res => {
        if (res.code === 200) {
          _.companyInfo = res.data;
        }
      });
    },

    handleSubmit() {
      if (this.expire) {
        this.againApply();
      } else {
        this.normalApply()
      }
    },
    normalApply(){
      let _this = this;
      this.btnLoading = true;
      let uscCode = this.user.user.uscCode?this.user.user.uscCode:'';
      let appCode = this.user.user.appCode?this.user.user.appCode:'';
      creditApply( {
        "appCode": appCode,
        "productCode": this.productCode,
        "fundCode": this.code,
        "uscCode": uscCode,
        "managerNo": this.companyInfo.managerNo?this.companyInfo.managerNo:''
      }).then(response => {
        if (response.code === 200) {
          if (response.data) {
            if (response.data.applyStatus == '000') {
              _this.$emit('apply-completed');
            } else {
              _this.$message.error(response.data.errorMessage);
            }
          } else {
            _this.$message.error('系统异常，请联系管理员！');
          }
        }
        _this.btnLoading = false;
      }).catch(err => {
        _this.btnLoading = false;
      })
    }
  }
}
</script>

<style lang="scss">

.credit-container {
  text-align: center;
  width: 100%;
  float: left;
  background: white;

  .mc-middle_title {
    margin-top: 20px;
    margin-bottom: 20px;
    height: 30px;
  }

  .apply-info {
    position: relative;
    margin: 0 auto 0 auto;
    background-image: url("../../assets/bussiness/combinedShape.jpg");
    background-repeat: no-repeat;
    width: 397px;
    height: 236px;

    .ai-top {
      text-align: left;;
      line-height: 68px;
      padding-left: 36px;
      font-weight: bold;
    }

    #apply_date {
      font-size: 12px;
      position: absolute;
      top: 18px;
      right: 65px;
    }

    .line {
      position: absolute;
      top: 42px;
      left: 30px;
      width: 400px;
      height: 1px;
      background: #E9E9E9;
    }
    .ai-qx {
      width: 100%;
      height: 160px;
      .aq-item{
        margin-top: 14px;
        margin-bottom: 8px;
        text-align: left;
        padding-left: 105px;
        padding-right: 105px;
        font-weight: bold;
        .aq-span{
          display: block;
          float: left;
          width: 100px;
        }
        .item-right{
          text-align: left;
        }
      }
    }

  }

  .apply-company {
    margin: 28px auto 0 auto;
    width: 437px;
    padding: 0 32px;
    height: 223px;

    .title-box {
      text-align: left;
      .title {
        background: url("../../assets/bussiness/nav_icon.png") center left no-repeat;
        background-size: 4px 15px;
        font-size: 16px;
        color: #606266;
        font-weight: 600;
        padding-left: 12px;
      }
    }
    .item-row {
      width: 100%;
      float: left;
      padding-left: 11px;
      clear: both;
      margin-top: 16px;
      .item-left {
        width: 40%;
        float: left;
        text-align: left;
        .btn-select {
          color: #FFA01D;
          cursor: pointer;
          margin-left: 5px;
        }
      }
      .item-right {
        float: left;
        width: 60%;
        text-align: left;
        .btn-select {
          color: #FFA01D;
          cursor: pointer;
          margin-left: 5px;
        }
      }
    }
  }
  .apply-address{
    height: 96px;
  }
  .apply-agreement{
    height: 60px;
    margin-top: 0px;
  }

  .apply-submit{
    margin: 30px 0 50px 0;
  }
  .selected-item {
    text-align: left;
    margin-top: 24px;
    color: #303133;
    font-size: 16px;
  }

  .ab-item {
    width: 50%;
    float: left;
    text-align: left;
  }

  .ab-item:nth-child(odd) {
    padding-left: 30%;
  }

  .ab-item:nth-child(even) {
    padding-left: 10%;
  }

  span.el-checkbox__label {
    color: black !important;
  }

  .tsd-base {
    img {
      height: 168px;
    }
  }
  .tsd-ph_last {
    font-weight: bold;
    font-size: 18px;
    a{
      color: #FF9B00;
      cursor: pointer;
      font-size: 14px;
      text-decoration: underline;
    }
  }
  .tsd-fh_last {
    margin-top: 15px;
    margin-bottom: 10px;
    padding: 0px 200px 0px 360px;
    text-align: left;

    .al-item {
      height: 32px;
      float: left;
      text-align: left;

      span.el-checkbox__label {
        border-bottom: 1px solid #4A4A4A;
        padding-left: 0;
        margin-left: 10px;
      }
    }

    .al-item:nth-child(odd) {
      width: 40%;
      position: relative;
    }

    .al-item:nth-child(even) {
      width: 60%;
      position: relative;
      left: 0px;
    }
  }

  .tsd-fh_bottom {
    color: #FFA01D;
    text-align: center;
  }
}
</style>
